<template>
  <div id="admin">
    <div class="titleBar">
      <div>学院管理</div>
      <div>
        <el-button type="primary" @click="add_Academy()">新增学院</el-button>
      </div>
    </div>
    <div class="tabBar">
      <div class="role-man" v-for="(item, index) in academyList" :key="index">
        <!-- <div class="r-picture">
          <img src="./ar86e-xh183.jpg" alt="" />
        </div> -->
        <div class="r-text">
          <div class="academy">{{ item.named }}</div>
          <div>{{ item.remark }}</div>
          <!-- <div class="administrator">
            <div id="a">
              <img
                src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
                alt=""
              />
            </div>
            <div id="b">
              <div>学院负责人：XXX</div>
              <div>电话：18087256278</div>
            </div>
          </div> -->
        </div>
        <div class="r-button">
          <span @click="updateThisAcademic(item)"
            ><i class="el-icon-edit-outline"></i
          ></span>
          <!-- <span><i class="el-icon-s-tools"></i></span> -->
          <span @click="deleteThisAcademic(item)" class="delete"
            ><i class="el-icon-delete"></i
          ></span>
        </div>
      </div>
    </div>

    <!-- 修改或新增菜单 -->
    <el-dialog
      :title="isAdd ? '新增学院' : '修改'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <!-- <el-form :model="form" ref="form" :rules="rules" label-width="80px"> -->
      <el-form :model="form" ref="form" label-width="80px" :rules="rules">
        <el-form-item label="学院名称" prop="named">
          <el-input v-model="form.named" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAcademic('form', form)"
          >提 交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addxueyuan,
  deletexueyuan,
  updataxueyuan,
  allxueyuan,
} from "@/api/academic";
export default {
  data() {
    var checkwrite = (rules, value, text) => {
      const regRole =
        /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/;
      if (regRole.test(value)) {
        return text();
      }
      text(new Error("请输入正确的角色"));
    };
    return {
      dialogVisible: false,
      isAdd: 1,
      academyList: [],
      form: {
        named: "",
        remark: "",
      },

      rules: {
        named: [
          { required: true, message: "请输入学院名称", trigger: "blur" },
          {
            min: 1,
            validator: checkwrite,
            message: "请输入正确的学院名称",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      this.getAllAcademic();
    },

    //获取所有学院
    getAllAcademic() {
      allxueyuan().then((res) => {
        this.academyList = res.data;
      });
    },

    // 新增\修改 学院
    addAcademic(form, data) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            addxueyuan(data).then((res) => {
              if (res.code === 0) {
                this.dialogVisible = false;
                this.$refs.form.resetFields();
                this.$message({
                  type: "success",
                  message: "添加学院成功",
                });
                this.init();
              } else {
                this.$message({
                  type: "danger",
                  message: "未添加成功,请联系管理员",
                });
                this.dialogVisible = false;
              }
            });
          } else {
            updataxueyuan(data).then((res) => {
              if (res.code == 0) {
                this.dialogVisible = false;
                this.$refs.form.resetFields();
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.init();
              } else {
                this.dialogVisible = false;
                this.$message({
                  type: "danger",
                  message: "出错了,请联系管理员",
                });
              }
            });
          }
        }
      });
    },

    //修改该学院的信息
    updateThisAcademic(row) {
      this.isAdd = 0;
      this.dialogVisible = true;
      this.$nextTick(function () {
        this.form = Object.assign({}, row);
      });
    },

    //删除该学院
    deleteThisAcademic(data) {
      let id = {
        id: data.id,
      };
      deletexueyuan(id).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.init();
        } else {
          this.$message({
            type: "danger",
            message: "删除失败,请联系管理员",
          });
        }
      });
    },

    //新增学院(按钮)
    add_Academy() {
      this.isAdd = 1;
      this.dialogVisible = true;
    },

    //关闭弹窗
    handleClose(done) {
      this.$refs.form.resetFields();
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
#admin {
  height: calc(100vh - 84px);
  width: 100%;
  background-color: #ffffff;
  padding: 0 20px 0 0;
  overflow: auto;

  .titleBar {
    border-bottom: 1px solid #0000002e;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: space-between;
    // margin-bottom: 20px;
    margin-left: 20px;
  }

  .tabBar {
    height: calc(100vh - 154px);
    overflow: auto;
    // background-color: aqua;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    align-content: flex-start;

    .role-man {
      // background-color: rgb(229, 151, 151);
      height: 210px;
      width: 256px;
      border-radius: 13px;
      margin-bottom: 20px;
      margin-left: 20px;
      overflow: hidden;
      z-index: 100;

      .r-picture {
        width: 256px;
        aspect-ratio: 16/9;

        img {
          width: 256px;
          aspect-ratio: 16/9;
          display: block;
        }
      }

      .r-text {
        width: 256px;
        height: calc(210px - 35px);
        box-sizing: border-box;
        border: 1px solid #d3d4d6;
        padding: 10px;
        padding-top: 40px;

        div {
        }

        .academy {
          width: 100%;
          color: #409eff;
          font-size: 23px;
          height: 48px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .administrator {
          height: 59px;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;

          #a {
            height: 50px;
            width: 50px;
            background-color: #d3d4d6;
            border-radius: 50%;
            overflow: hidden;

            img {
              height: 50px;
              width: 50px;
              border-radius: 50%;
              display: block;
            }
          }

          #b {
            height: 50px;
            width: calc(100% - 50px);
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
        }
      }

      .r-text:hover {
        border-left: 0px;
        border-right: 0px;
      }

      .r-button {
        width: 256px;
        height: 35px;
        // #d3d4d6
        display: flex;
        background-color: rgb(114, 114, 114);

        span {
          background: #d3d4d6;
          width: calc(256px / 2);
          height: 35px;
          display: block;
          line-height: 35px;
          text-align: center;

          ::v-deep i {
            color: #6a6a6a;
          }
        }

        span:hover {
          background-color: #409eff;

          ::v-deep i {
            color: #ffffff;
          }
        }

        .delete:hover {
          background: #f56c6c;
        }
      }
    }

    .role-man:hover {
      box-shadow: 0 10px 34px rgb(31 45 61 / 40%);
      transform: scale(1.1);
      transition-duration: 0.5s;
    }
  }
}
</style>